<#assign pageTitle="资讯_${siteCompany.siteName!}"/>
<#assign pageKeywords = pageTitle />
<#assign pageDescription = pageTitle />
<#assign pageHeader>
    <link rel="stylesheet" type="text/css" href="/static/h5/css/course.css?20220210"/>
</#assign>
<#assign pageContent>
    <div class="list-filter-wrap">
        <div class="list-filter">
            <a class="item <#if orderBy == 0>active</#if>" href="/article/index.html">默认</a>
            <a class="item <#if orderBy == 1>active</#if>" href="/article/index.html?orderBy=1">热门</a>
        </div>
    </div>
    <van-pull-refresh v-model="dtRefreshing" @refresh="onRefreshDt" class="list-wrap">
        <van-list
                v-model="dtLoading"
                :finished="dtFinished"
                :error.sync="error"
                finished-text="没有更多了"
                error-text="请求失败，点击重新加载"
                @load="onLoadDt"
        >
            <div v-for="(item,index) in dtList" :key="index" @click="toView(item.articleId)" class="source-item source-item-img">
                <div class="source-item-left">
                    <img alt="" :src="item.cover" lazy="loaded">
                </div>
                <div class="source-item-title">
                    <div class="source-title-name">{{item.title}}</div>
                    <div class="source-property">浏览：{{item.viewCount}}</div>
                    <div class="source-property" >{{item.createTime}}</div>
                </div>
            </div>
        </van-list>
        <van-empty description="没有更多" v-if="emptyDoc"/>
    </van-pull-refresh>
</#assign>
<#assign pageScript>
    <script>
        var orderBy = ${orderBy};
        new Vue({
            el: '#app',
            data() {
                return {
                    showFooter: true,
                    activeTab: 3,//底部菜单选中项
                    dtList: [],
                    dtLoading: false,
                    dtFinished: false,
                    emptyDoc: false,
                    dtRefreshing: false,
                    dtPage: 0,
                    error: false,
                    limit: 6,
                    showList: false,
                    emptyArticle: false
                }
            },
            created() {
                let that = this;
                that.onLoadDt();

            },
            methods: {
                dateFormat: dateFormat,//格式化日期
                onLoadDt() {
                    var _self = this;
                    if (_self.dtRefreshing) {
                        _self.dtList = [];
                        _self.dtRefreshing = false;
                    }
                    _self.dtPage = _self.dtPage + 1;
                    _self.dtLoading = true;
                    axios.get('/ajax/article/list.json', {
                        params: {
                            orderBy: orderBy,
                            page: _self.dtPage,
                            limit: _self.limit
                        }
                    }).then(function (response) {
                        if (response.data.code === 0) {
                            _self.dtList = _self.dtList.concat(response.data.data);
                            if (response.data.data.length < _self.limit) {
                                _self.dtFinished = true;
                            }
                            if (response.data.data.length === 0 && _self.dtPage < 2) {//初始未请求到数据
                                _self.emptyDoc = true;
                                return
                            }
                        } else {
                            _self.error = true;
                            console.log(response.data.msg);
                        }
                        _self.dtLoading = false;
                    }).catch(function (error) {
                        _self.error = true;
                        _self.dtLoading = false;
                        console.log(error);
                    });
                },
                onRefreshDt() {
                    // 重新加载数据
                    this.dtRefreshing = true;
                    this.onLoadDt();
                },
                toView(id) {
                    window.location.href = '/article/view/' + id + '.html';
                }
            },
        })
    </script>
</#assign>
<#include "../layout_h5.ftl" />